<template>
  <Panel title="服务区列表" class="service-area-list" v-bind="props.config">
    <ScrollTable
      :columns="columns"
      :dataSource="dataSource"
      scroll="calc(100% - 0.5rem)"
      @tableClick="tableClick"
      :tableLoading="tableLoading"
      rowKey="serviceId"
    ></ScrollTable>
  </Panel>
</template>

<script>
export default {
  name: 'ServiceAreaList'
}
</script>
<script setup>
/**
 * @desc 服务区列表(二级)
 * @auther 阳坤
 * @date 2022/10/27
 *
 **/

import Panel from '../../components/panel'
import ScrollTable from '../../components/scroll-table'
import serviceAreaApi from '../../api/service-area.js'
import useWatchStore from '@/hooks/useWatchStore'
import { ref, defineProps, defineEmits, computed } from 'vue'
import { useStore } from 'vuex'
import { get } from '@/utils'
const store = useStore()
const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

// emit回调方法
const emit = defineEmits(['setDetail'])

const columns = [
  {
    title: '服务区名称',
    dataIndex: 'serviceName',
    key: 'serviceName',
    width: '40%',
    ellipsis: true
  },
  {
    title: '断面流量',
    dataIndex: 'serviceAreaFlow',
    key: 'serviceAreaFlow'
  },
  {
    title: '入区率',
    dataIndex: 'areaRatio',
    key: 'areaRatio',
    customRender(record) {
      return record.text ? record.text + '%' : ''
    }
  },
  {
    title: '车位饱和度',
    dataIndex: 'utilization',
    key: 'utilization',
    customRender(record) {
      return record.text ? (record.text * 100).toFixed(2) + '%' : ''
    }
  }
]
// 表格数据
const dataSource = ref([])
// loading
const tableLoading = ref(false)

/**
 * 获取数据
 */
const getData = (argParams, action) => {
  tableLoading.value = true
  const params = {
    // roadType: argParams.roadType,
    // province: '32',
    // city: argParams.areaCode,
    // page: 1,
    // limit: 1000
    // deptId: '402880465ab1160c015ab1d51641007e'
    deptId: get(store, 'state.user.userInfo.orgInfos.0.orgId'),
    bussinessCode: get(store.state, 'user.bussinessType')
  }
  serviceAreaApi
    .getServiceAreaStatistic(params)
    .then(res => {
      if (res.data) {
        dataSource.value = res.data || []
      }
    })
    .finally(() => (tableLoading.value = false))
}
/**
 * 表格列表点击
 */
const tableClick = data => {
  emit('setDetail', {
    type: 'service-area-list',
    actions: 'click',
    data,
    config: props.config.detailConfig
  })
}

/**
 * 初始化以及监听地市编码跟路网类型
 */
useWatchStore(getData)
</script>

<style scoped lang="less">
.service-area-list {
  /deep/.mz-panel-content-main {
    padding: 10px 3px;

    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 8px 4px 8px 11px;
    }
  }
}
</style>
